<template>
  <div class="mess">
    <p>药品信息</p>
    <template>
      <el-table
        :data="DrugList"
        style="width: 100%; height: 320px; overflow: auto"
      >
        <el-table-column prop="id" label="序号" width="50"> </el-table-column>
        <el-table-column prop="code" label="药品编码" width="80">
        </el-table-column>
        <el-table-column prop="name" label="药品名称" width="120">
        </el-table-column>
        <el-table-column prop="standards" label="药品规格" width="100">
        </el-table-column>
        <el-table-column prop="count" label="数量" width="100">
          <template slot-scope="scope">
            <button @click="scope.row.count++">+</button>
            {{ scope.row.count }}
            <button @click="scope.row.count--" :disabled="scope.row.count <= 1">
              -
            </button>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="单位" width="80"> </el-table-column>
        <el-table-column prop="price" label="单价" width="60">
        </el-table-column>
        <el-table-column prop="total" label="总价" width="70">
          <template slot-scope="scope">
            {{ scope.row.count * scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="total" label=' 编辑' width="80" style="text-align:center;">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="table-foot">
        <el-button
          class="addmoney el-icon-circle-plus-outline"
          type="text"
          @click="AddDrug"
          >添加药品</el-button
        >
        <span class="admin">&nbsp;操作员:&nbsp;&nbsp;</span>
        <select name="" id="">
          <option value="">甘雪丽</option>
          <option value="">蔡徐坤</option>
        </select>
        <span class="spanTol">总计：{{allPrice}}</span>
      </div>
    </template>
  </div>
</template>

<script>
import EventBus from "../../../utils/eventBus";
import { DeleteDrugApi } from "../../../api/DrugDatil";
export default {
  props: ["DrugList"],
  computed: {
    allPrice(){
      var sum = 0;
      this.DrugList.forEach(item => {
        sum += item.price * item.count;
      }) 
      return sum;
    },
  },
  methods: {
    handleDelete(id) {
      console.log(id);
      DeleteDrugApi(id).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$emit("initDrug");
        }
      });
    },
    AddDrug() {
      EventBus.$emit("DialogIsShow");
      console.log(111);
    },
  },
  data() {
    return {
      //   tableData: [
      //     {
      //       id: 1,
      //       code: 1000002,
      //       name: "头孢颗粒",
      //       standards: "药品规格",
      //       count: 1,
      //       type: "盒",
      //       price: 100,
      //       total: 200,
      //     },
      //   ],
    };
  },
  mounted(){

  }
};
</script>

<style lang="less" scoped>
.mess {
  width: 750px;
  height: 450px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  margin: 20px 20px;
  border-radius: 5px;
  p {
    color: #959aee;
    font-size: 26px;
    font-weight: 600;
    margin: 20px 20px;
  }
  .el-table::before {
    height: 0;
  }
  .table-foot {
    margin: 0 20px;
    height: 50px;
    border-top: 1px solid #e5e5e5;
    line-height: 50px;
    .addmoney {
      width: 100px;
      height: 30px;
      background-color: #28d094;
      border: none;
      border-radius: 5px;
      color: #fff;
    }
    .admin {
      font-size: 12px;
      margin-left: 8px;
    }
    .spanTol {
      float: right;
    }
  }
}
</style>